<template>
  <div class="fatherAndChild">
    <h1>我是父组件！</h1>
    <div class="fadesc">1.父组件通过import的方式导入子组件，并在components属性中注册，然后子组件就可以用标签&lt;child&gt;的形式嵌进父组件了。</div>
    <div class="fadesc">
      2.子组件的props选项能够接收来自父组件数据。没错，仅仅只能接收，props是单向绑定的，即只能父组件向子组件传递，不能反向。<br />
        ①静态传递：子组件通过props选项来声明一个自定义的属性，在父组件嵌套标签的时候，就可以通过子组件属性传递数据。<br/>
        ②动态传递: 通过v-bind绑定props的自定义属性，值可以是一个表达式、布尔类型、对象等属性。子组件props中定义了add属性，父组件中使用:add='3+2'<br>
    </div>
    <div class="fadesc">
      3.通过$ref实现通信：ref 是被用来给元素或子组件注册引用信息的。引用信息将会注册在父组件的 $refs 对象上。<br />
      解释这里：如果ref用在子组件上，指向的是<strong>组件实例</strong>，可以理解为<strong>对子组件的索引</strong>，通过$ref可能获取到在子组件里定义的属性和方法。<br />
      如果ref在普通的 DOM 元素上使用，引用指向的就是 DOM 元素，通过$ref可能获取到该DOM 的属性集合，轻松访问到DOM元素，作用与JQ选择器类似。
    </div>
    <div class="fadesc">
      4.通过$emit 实现通信:上面两种示例主要都是父组件向子组件通信，而通过$emit 实现子组件向父组件通信。<br />
      解释：vm.$emit( event, arg )，$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。
    </div>
    <div class="childText">子组件向父组件emit的信息是{{title}}</div>
    <child message="静态传递方式：子组件通过props声明了一个mssage属性，父组件现在就通过这个属性，传递信息了，现在你在子组件看到我了吧"
    :add="3+2" ref="refInfo" @fatherGetMessage="showMsg"></child>
  </div>
</template>

<script>
import Child from '@/components/Child.vue'
export default {
  name: 'FatherAndChild',
  components: {
    Child
  },
  data () {
    return {
      title: ''
    }
  },
  methods: {
    showMsg (title) {
      this.title = title
    }
  },
  mounted () {
    console.log(this.$refs.refInfo)
    this.$refs.refInfo.getMessage('父组件通过$refs.(属性名).方法，传递消息，你现在可以看到父组件把消息传给子组件了')
  }
}
</script>

<style lang="less" scoped>
.fatherAndChild {
  padding: 10px 20px;
  width: 100%;
  height: auto;
  border: 1px solid rgb(218, 86, 86);
  h1{
    font-size: 18px;
    font-weight: 700;
    color: rgb(218, 86, 86);
  }
  .fadesc {
    margin: 10px 0;
    color: #333;
    font-size: 14px;
    line-height: 20px;
  }
  .childText {
    margin: 10px 0;
    color: rgb(110, 17, 17);
    font-size: 14px;
    line-height: 20px;
  }
}
</style>
